<template>
	<!-- 划转 -->
	<view class="transferred-box">
		<nav-bar :title="i18n.transferred.title" @_back="_back" rightIcon="plan" @rightClick="rightClick" />
		<view class="container">
			<view class="change-box">
				<view class="left-box">
					<view class="left-box-top" @click="openCurrency">
						<text class="white-text">{{info.form_name}}</text>
						<u-icon v-show="!isUsdt" name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
					</view>
					<view class="left-box-bottom dis-between" @click="openTo">
						<text class="white-text">{{info.to_name}}</text>
						<u-icon v-show="isUsdt" name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
					</view>
				</view>
				<view class="right-box list-bg">
					<image @click="transferredClick" class="change-image" src="../../static/images/ui/change.png"
						mode="widthFix"></image>
				</view>
			</view>
			<!-- list -->
			<custom-list :title="i18n.mention.currency">
				<view class="dis-between">
					<text class="white-text">USDT</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.transferred.number">
				<template slot="titleRightText">
					<text>{{ i18n.point.usable + '：' + usdt + ' USDT'}}</text>
				</template>
				<view class="dis-between">
					<input v-model="info.number" type="number" :placeholder="i18n.mention.enterNumber">
					<text class="main-color" @click="allIn">{{i18n.common.all}}</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.common.notification" :font="32" :isHeng="false">
				<view class="notice">
					<text>{{i18n.mention.notice1}}</text>
					<view>
						<text>{{i18n.mention.notice2}}</text>
					</view>
				</view>
			</custom-list>
			<custom-submit @click="submit" :loading="loading" class="submit-box" :title="i18n.transferred.title">
			</custom-submit>
		</view>
		<!-- form币种 -->
		<select-currency ref="form" :currentId="isUsdt? info.currency_to_id: info.currency_from_id"
			:list="ferredList | toList" @click="formClick"></select-currency>
		<!-- to币种 -->
		<!-- <select-currency ref="to" :list="ferredList" @click="toClick"></select-currency> -->
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import CustomList from '@/components/CustomList/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		walletChange
	} from '@/api/index.js'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			CustomList,
			CustomSubmit,
			SelectCurrency
		},
		filters: {
			toList(val) {
				let arry = [];
				for (let i in val) {
					if (val[i].title !== '币币') {
						arry.push(val[i])
					}
				}
				return arry;
			}
		},
		computed: {
			...mapGetters(['ferredList', 'token']),
			i18n() {
				return this.$t('message');
			},
		},
		onReady() {
			for (let i in this.ferredList) {
				if (this.ferredList[i].title === '币币') {
					this.info.form_name = this.ferredList[i].title;
					this.info.currency_from_id = this.ferredList[i].id;
					this.usdt = this.ferredList[i].balance;
				}
				if (this.ferredList[i].title === '周期') {
					this.info.to_name = this.ferredList[i].title;
					this.info.currency_to_id = this.ferredList[i].id;
				}
			}
		},
		data() {
			return {
				info: {
					form_name: '',
					to_name: '',
					currency_from_id: 0,
					number: 0
				},
				loading: false,
				usdt: '0',
				isUsdt: true
			}
		},
		methods: {
			_back() {
				uni.switchTab({
					url: '/pages/balances/index'
				})
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/transferred/record'
				})
			},
			openCurrency() {
				if (this.isUsdt) return;
				this.$refs.form.open();
			},
			openTo() {
				if (!this.isUsdt) return;
				this.$refs.form.open();
			},
			formClick(val) {
				if (this.isUsdt) {
					this.info.to_name = val.name;
					this.info.currency_to_id = val.id;
					return;
				}
				
				this.info.form_name = val.name;
				this.info.currency_from_id = val.id;
				for (let i in this.ferredList) {
					if (this.ferredList[i].id === val.id) {
						this.usdt = this.ferredList[i].balance;
					}
				}
			},
			toClick(val) {
				this.info.to_name = val.name;
				this.info.currency_to_id = val.id;
			},
			allIn() {
				this.$nextTick(() => {
					this.info.number = JSON.parse(JSON.stringify(this.usdt));
				})
			},
			async submit() {
				if (!this.info.currency_from_id) return Toast(this.i18n.transferred.from_id);
				if (!this.info.currency_to_id) return Toast(this.i18n.transferred.to_id);
				if (!this.info.number) return Toast(this.i18n.mention.enterNumber);
				this.loading = true;
				this.info.token = this.token;
				let {
					error,
					res
				} = await walletChange(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.transferred.success);
				this.loading = false;
				uni.redirectTo({
					url: '/pages/transferred/record'
				})
			},
			transferredClick() {
				if (!this.info.currency_from_id || !this.info.currency_to_id) return;
				this.isUsdt = !this.isUsdt;
				let form_id = this.info.currency_from_id;
				let form_name = this.info.form_name;
				let to_id = this.info.currency_to_id;
				let to_name = this.info.to_name;
				this.info.currency_from_id = JSON.parse(JSON.stringify(to_id));
				this.info.form_name = JSON.parse(JSON.stringify(to_name));
				this.info.currency_to_id = JSON.parse(JSON.stringify(form_id));
				this.info.to_name = JSON.parse(JSON.stringify(form_name));
				for (let i in this.ferredList) {
					if (this.ferredList[i].id === to_id) {
						this.usdt = this.ferredList[i].balance;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transferred-box {
		padding-bottom: 40rpx;

		.change-box {
			margin-top: 60rpx;
			display: flex;
			height: 176rpx;

			.left-box {
				width: calc(100% - 130rpx);
				height: 100%;
				border: 1px solid rgba(255, 255, 255, .1);
				border-right: none;
				border-radius: 16rpx 0 0 16rpx;

				.left-box-top {
					position: relative;
					padding-left: 115rpx;

					&:before {
						content: 'From';
						position: absolute;
						top: 27rpx;
						left: 30rpx;
						color: rgba(255, 255, 255, .54);
						font-size: 24rpx;
					}
				}

				.left-box-bottom {
					position: relative;
					padding-left: 115rpx;

					&:before {
						content: 'To';
						position: absolute;
						top: 27rpx;
						left: 30rpx;
						color: rgba(255, 255, 255, .54);
						font-size: 24rpx;
					}
				}

				&>view {
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					font-size: 30rpx;

					&:first-child {
						border-bottom: 1px solid rgba(255, 255, 255, .1);
					}
				}
			}

			.right-box {
				width: 130rpx;
				height: 100%;
				border-radius: 0px 16rpx 16rpx 0px;
				display: flex;
				align-items: center;
				justify-content: center;

				.change-image {
					width: 60rpx;
				}
			}
		}

		.submit-box {
			margin-top: 100rpx;
		}

		.dis-between {
			&>.right-box-all {
				font-size: 30rpx;
				color: rgba(255, 255, 255, .54);

				.main-color {
					margin-left: 30rpx;
				}
			}

			&.transferred-text {
				color: rgba(255, 255, 255, .4);
				font-size: 24rpx;

				.white-text {
					display: block;
					margin-top: 22rpx;
					font-size: 30rpx;
					text-align: center;
				}
			}
		}

		.notice {
			color: rgba(255, 255, 255, .54);
			font-size: 26rpx;

			text {
				line-height: 52rpx;
				text-indent: -20rpx;
				padding-left: 20rpx;
				display: inline-block;
			}
		}
	}
</style>
